<template>
  <div>
    <b>{{ label }}</b>：
    <span v-for="(value,index) in values" :key="index">
      {{
        buildContent(value, index)
      }}
    </span>
  </div>
</template>

<script>
export default {
  name: "StringAttributesDiv",
  props: {
    label: {type: String, default: null},
    values: {
      type: Array, default: function () {
        return []
      }
    },
    valueKey: {
      type: String, default: null
    }
  },
  methods: {
    buildContent(value, index) {
      if (this.valueKey) {
        let v = value[this.valueKey]
        return index === this.values.length - 1 ? v : v + ','
      } else {
        return index === this.values.length - 1 ? value : value + ','
      }
    }
  }
}
</script>

<style scoped>

</style>
